import React, { Component } from 'react'
// import axios from 'axios'
import { API } from '../../utils/api'
// 导入NavBar组件
import {Toast} from 'antd-mobile'
import './index.scss'
// import   { BASE_URL } from  '../../utils/url'
//导入List组件
import {List,AutoSizer} from 'react-virtualized'
//导入utils中，获取当前定位城市的方法
import {getCurrentCity} from '../../utils/index'
import NavHeader from '../../components/NavHeader'
//数据格式化的方法
//list:[{},{},...]
const formatCityData = list => {
    const cityList = {}
    // const cityIndex = []
  
    // 1 遍历list数组
    list.forEach(item => {
      // 2 获取每一个城市的首字母
      const first = item.short.substr(0, 1)
      // 3 判断 cityList 中是否有该分类
      if (cityList[first]) {
        // 4 如果有，直接往该分类中push数据
        // cityList[first] => [{}, {}]
        cityList[first].push(item)
      } else {
        // 5 如果没有，就先创建一个数组，然后，把当前城市信息添加到数组中
        cityList[first] = [item]
      }
    })

    //获取索引数据
    const cityIndex =  Object.keys(cityList).sort()

    return{
        cityList,
        cityIndex
    }
}

//封装处理字母索引的方法
const formatCityIndex = (letter) =>{
    switch(letter){
        case '#':
            return '当前定位'
        case 'hot':
            return '热门城市'
        default:
            return letter.toUpperCase()
            // break;
    }
}

//索引和城市名称的高度
const TITLE_HEIGHT = 36
const NAME_HEIGHT = 50

const HOUSE_CITY = ['北京','上海','广州','深圳']

export default class CityList extends Component {
    constructor(props){
        super(props)
        this.state = {
            cityList: { },
            cityIndex: [] ,
            //高亮的索引号
            activeIndex: 0
        }

        //创建ref对象
        this.cityListComponent = React.createRef()
    }

    
    //获取城市列表数据的方法    
    async getCityList(){
        const res = await API.get('/area/city?level=1')
        console.log(res);
        const { cityList, cityIndex} = formatCityData(res.data.body)
        //获取热门城市数据
        const hotRes = await API.get('/area/hot')
        console.log('热门城市数据',hotRes);
        cityList['hot'] = hotRes.data.body

        // 获取当前定位城市
        const curCity = await getCurrentCity()
        //把索引添加到cityIndex第一个中
        cityIndex.unshift('hot')
        cityList['#'] = [curCity]
        cityIndex.unshift('#')
        this.setState({
            cityList,
            cityIndex
        })
        console.log( '城市列表和索引',cityList);
    }

    changeCity({label,value}){
        // console.log(curCity);
        if(HOUSE_CITY.indexOf(label) > -1 ){
            //有
            localStorage.setItem('hkzf_city',JSON.stringify({label,value}))
            this.props.history.go(-1)
        }else{
            Toast.info('该城市暂无房源数据',1,null,false)
        }
    }

    //渲染每一行数据的渲染函数,函数的返回值就是最终渲染在页面上的内容
    rowRenderer = ({
        key, // Unique key within array of rows
        index, // 索引号
        isScrolling, // 表明当前项，是否正在滚动中
        isVisible, // 当前项在List中是可见的
        style, // 注意：重点属性，一定要给每一行数据添加该样式！作用：指定每一行的位置
    }) => {
        //获取每一行的字母索引
        const { cityIndex,cityList } = this.state
        const letter = cityIndex[index]
        
        return (
            <div key={key} style={style} className='city'>
                <div className='title'>{formatCityIndex(letter)}</div>
                {
                    cityList[letter].map(item =><div className='name' key={item.value} onClick={()=> this.changeCity(item)}> 
                    {item.label}
                    </div>)
                }
            </div>
        );
    }

    async componentDidMount(){
        await this.getCityList()


        //measureAllRows，提前计算List中每一行的高度，实现scrollToRow的精确调整
        //注意：调用这个方法的时候，需要保证List组件中已经有数据了！如果List组件中的数据为空，就会报错
        this.cityListComponent.current.measureAllRows()
    }

    //  动态计算每一行高度的方法
    getRowHeight = ({index}) => {
        //索引标题高度+城市数量*城市名称的高度
        // TITLE_HEIGHT + cityList[cityIndex[index]].length * NAME_HEIGHT
        const {cityList,cityIndex} = this.state
        return TITLE_HEIGHT + cityList[cityIndex[index]].length * NAME_HEIGHT
    }
    //渲染右侧索引的方法
    renderCityIndex(){
        //获取到cityIndex，并遍历，来渲染
        const {cityIndex, activeIndex } = this.state
        return cityIndex.map((item,index) =>  <li className='city-index-item' key={item}  onClick={()=>{
            // console.log('当前索引号',index);
            this.cityListComponent.current.scrollToRow (index)
        }}>
        <span className={activeIndex === index ? "index-active" : ''}>{item === 'hot' ? '热' : item.toUpperCase()}</span>
    </li>)
    }

    //用于获取List组件中，渲染行的信息
    onRowsRendered = ({startIndex})=>{
        // console.log(startIndex);
        if(this.state.activeIndex !== startIndex){
            this.setState({
                activeIndex: startIndex
            })
        }
    }
        render() {
        return (
            <div className='citylist'>

               <NavHeader>
                   城市列表
               </NavHeader>

                {/* 城市列表 */}
                <AutoSizer>
                    {({width,height}) =>(
                        <List
                        ref={this.cityListComponent}
                        width={width}
                        height={height}
                        rowCount={this.state.cityIndex.length}
                        rowHeight={this.getRowHeight}
                        rowRenderer={this.rowRenderer}
                        onRowsRendered={this.onRowsRendered}
                        scrollToAlignment='start'
                    />
                    )}
                    
                </AutoSizer>
                {/* 右侧索引列表 */}
                <ul className='city-index'>
                   {this.renderCityIndex()}
                </ul>
            </div>
        )
    }
}
